﻿@page "/datagrid/observable-binding"

@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
@using System.Collections.ObjectModel;
@using System.ComponentModel;
@using BlazorDemos
@using blazor_griddata
@inherits SampleBaseComponent;

<SampleDescription>
  <p>This sample demonstrates the usage of Observable data binding in DataGrid component.</p>  
</SampleDescription>
<ActionDescription>
   <p> Using Observable Collections Objects can be added, removed or updated with an automatic notification of actions. The UI will be automatically updated, when an object is added to or removed from an observable collection. To refresh UI for single property update, the setter of the corresponding property must be configured as shown in the sample.</p>
   <p>More information on the observable data binding can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/grid/data-binding/#observable-collection'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <div class="btn" style="margin: 0 0 7px 7px;" >
            <SfButton ID="add" @onclick="AddRecord">Add Data</SfButton>
            <SfButton ID="del" CssClass="deleteBtn" @onclick="DeleteRecord">Delete Data</SfButton>
            <SfButton ID="update" @onclick="UpdateRecord">Update Data</SfButton>
             </div>
            <SfGrid DataSource="@ObservableData" AllowPaging="true">
                <GridColumns>
                    <GridColumn Field=@nameof(ObservableDatas.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="@TextAlign.Center" HeaderTextAlign="@TextAlign.Center" Width="140"></GridColumn>
                    <GridColumn Field=@nameof(ObservableDatas.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(ObservableDatas.Freight) HeaderText="Freight" EditType="EditType.NumericEdit" Format="C2" Width="140" TextAlign="@TextAlign.Right" HeaderTextAlign="@TextAlign.Right"></GridColumn>
                    <GridColumn Field=@nameof(ObservableDatas.OrderDate) HeaderText="Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Type="ColumnType.Date" Width="160"></GridColumn>
                </GridColumns>
            </SfGrid>
        </div>
    </div>
</div>
<style>
    .deleteBtn {
         margin: 0 5px 0 5px;
    }
</style>
@code{

    public ObservableCollection<ObservableDatas> ObservableData { get; set; }

    List<ObservableDatas> Orders = new List<ObservableDatas>();

    private int uniqueid { get; set; }

    protected override void OnInitialized()
    {

           Orders = Enumerable.Range(1, 10).Select(x => new ObservableDatas()
           {
                OrderID = 10000 + x,
                CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
                Freight = 2.1 * x,
                OrderDate = DateTime.Now.AddDays(-x),
           }).ToList();
           ObservableData  = new ObservableCollection<ObservableDatas>(Orders);
    }

    public void AddRecord()
    {
        ObservableData.Add(new ObservableDatas() { OrderID = 10010 + ++uniqueid, CustomerID = "VINET", Freight = 30.35, OrderDate = new DateTime(1991, 05, 15) });
    }

    public void DeleteRecord()
    {
        if (ObservableData.Count() != 0)
        {
            ObservableData.Remove(ObservableData.First());
        }
    }

    public void UpdateRecord()
    {
        if (ObservableData.Count() != 0)
        {
            var name = ObservableData.First();
            name.CustomerID = "Record Updated";
        }
    }

    public class ObservableDatas : INotifyPropertyChanged
    {
        public int OrderID { get; set; }
        private string customerID { get; set; }
        public string CustomerID
        {
            get { return customerID; }
            set
            {
                this.customerID = value;
                NotifyPropertyChanged("CustomerID");
            }
        }


        public DateTime OrderDate { get; set; }
        public double Freight { get; set; }
        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged(string propertyName)
        {
            var handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

